<template>
    <div class="general">
        <div class="general_top">
            <div class="into_index">首页<i class="el-icon-close"></i></div>
            <div class="current">经营总况<i class="el-icon-close"></i></div>
        </div>
        <div class="navBox">
            <div class="item" :class="{'active':index==navIndex}" v-for="(item,index) in topNavList" :key="index" @click="changeNav(index)">
                <div class="icon"><i class="iconfont">&#xe640;</i></div>
                <div class="priceNum">{{item.price}}元<p>{{item.name}}</p>
                </div>
            </div>
        </div>
        <div class="selectBox">
            <div class="selectBtn">
                下单时间
                <el-date-picker style="margin: 0 20px 0 10px;" v-model="valueTime" type="daterange" @change="selectTime" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份">
                </el-date-picker>
                订单类型
                <el-select v-model="valueType" @change="selectType" placeholder="请选择">
                    <el-option v-for="item in orderTypeList" :key="item.value" :label="item.name" :value="item.value">
                    </el-option>
                </el-select>
                <!-- <el-button type="primary">查询</el-button> -->
            </div>
            <div class="searchBox">
                <div class="item">
                    <div class="price_order">订单数量<span>{{profitInfo.order_count}}单</span></div>
                    <div class="price_order">{{topNavList[navIndex].name}}<span>{{topNavList[navIndex].price}}元</span></div>
                </div>
                <div class="item">
                    <el-input style="width:50%;" type="text" v-model="input" placeholder="请输入订单号搜索"></el-input>
                    <el-button type="primary" class="iconfont" @click="searchOrder">&#xe68e; 搜索</el-button>
                </div>
            </div>
        </div>
        <div class="table">
            <div class="partnerList_table">
                <div class="partnerList_bottom_table">
                    <table>
                        <tr>
                            <th></th>
                            <th>序号</th>
                            <th>订单号</th>
                            <th>订单类型</th>
                            <th>商家名称</th>
                            <th>下单时间</th>
                            <th>下单人</th>
                            <th>手机号</th>
                            <th>商品数量</th>
                            <th>订单价</th>
                            <th v-if="navIndex==1 || navIndex==2">商家收入</th>
                            <th v-if="navIndex==1 || navIndex==2">平台提成</th>
                            <!-- <th>操作</th> -->
                        </tr>
                        <tr v-for="(v,i) in profitInfo.list" :key="i">
                            <td>
                                <font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
                            </td>
                            <td>{{v.id}}</td>
                            <td>{{v.order_no}}</td>
                            <td>{{v.type==1?'商城订单':v.type==2?'设计师订单':'施工方订单'}}</td>
                            <td>{{v.name}}</td>
                            <td>{{$moment(v.create_time*1000).format('yyyy-MM-DD HH:mm')}}</td>
                            <td>{{v.u_id}}</td>
                            <td>{{v.mobile}}</td>
                            <td>{{v.quantity}}</td>
                            <td>{{v.order_price}}</td>
                            <td v-if="navIndex==1 || navIndex==2">{{v.store_income}}</td>
                            <td v-if="navIndex==1 || navIndex==2">{{v.platform_income}}</td>
                            <!-- <td> -->
                            <!-- <button class="editor" @click="toEditHouse(v.id)">详情</button> -->
                            <!-- <button class="shelves" @click="toDelHouse(v.id)">拒绝</button> -->
                            <!-- </td> -->
                        </tr>
                        <tr v-if="profitInfo.list.length == 0">
                            <td class="table_title" colspan="13">当前数据空空如也</td>
                        </tr>
                    </table>
                    <!-- <table v-if="navIndex==3">
						<tr>
							<th></th>
							<th>序号</th>
                            <th>佣金类型</th>
							<th>用户名称</th>
							<th>所属合作商</th>
							<th>佣金金额</th>
							<th>订单号</th>
							<th>订单类型</th>
							<th>下单时间</th>
							<th>订单商家</th>
							<th>操作</th>
						</tr>
						<tr v-for="(v,i) in profitInfo.list" :key="i">
							<td>
								<font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
							</td>
							<td>{{v.id}}</td>
							<td>{{v.id}}</td>
							<td>{{v.cash_type}}</td>
							<td>{{v.bank_name}}</td>
							<td>{{v.bank_account}}</td>
							<td>{{v.order_no}}</td>
							<td>{{v.type==1?'商城订单':v.type==2?'设计师订单':'施工方订单'}}</td>
							<td>{{$moment(v.stcreate_timeatus*1000).format('yyyy-MM-dd HH:mm:dd')}}</td>
							<td>{{v.name}}</td>
							<td>
								<button class="editor" @click="toEditHouse(v.id)">详情</button>
								<button class="shelves" @click="toDelHouse(v.id)">拒绝</button>
							</td>
						</tr>
						<tr v-if="tableList.length == 0"><td class="table_title" colspan="12">当前数据空空如也</td></tr>
					</table> -->
                    <div class="partnerList_bottom_page">
                        <div class="partnerList_bottom_page_left">
                            <div class="partnerList_bottom_page_left_checkAll" @click="handerCheckAll">
                                <font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
                            </div>全选
                            <!-- <button class="partnerList_bottom_page_left_btn" @click="selectDel">删除</button> -->
                        </div>
                        <div class="partnerList_bottom_page_right">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[15, 20, 30, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" background>
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                topNavList: [{
                    name: '经营收入',
                    price: 0
                }, {
                    name: '平台收益',
                    price: 0
                }, {
                    name: '合作商收益',
                    price: 0
                }, {
                    name: '可提现佣金',
                    price: 0
                }, ],
                navIndex: 0,
                valueTime: [], //时间选择
                input: '',
                tableList: [],
                page: 1,
                pagesize: 15,
                total: 0,
                checkBoxAll: [], // 选中的数据
                shelvesAlls: [],
                checkAll: false,
                valueType: '', //选择类型
                orderTypeList: [{ //订单类型
                    name: '商城订单',
                    value: 'product_order'
                }, {
                    name: '设计订单',
                    value: 'designer_order'
                }, {
                    name: '施工订单',
                    value: 'builder_order'
                }, {
                    name: '产品包订单',
                    value: 'pack_order'
                }, ],
                allPrice: {}, //经营收入总括
                profitInfo: {}, //收益详情与列表
                startDate: '',
                endDate: ''
            }
        },
        mounted() {
            this.getAllProfit()
            this.getProfitList()
        },
        methods: {
            changeNav(index) {
                this.navIndex = index
                console.log(index, 'navIndex');
                this.page = 1
                this.pagesize = 15
                this.getProfitList()
            },

            // 获取经营收入总括
            getAllProfit() {
                this.$http.post('/api/root/settle/viewIncome').then(res => {
                    console.log(res, '获取经营收入总括');
                    if (res.code == 1) {
                        this.topNavList[0].price = res.data.jysr;
                        this.topNavList[1].price = res.data.ptsy;
                        this.topNavList[2].price = res.data.hzssy;
                        this.topNavList[3].price = res.data.ktxyj;
                    }
                })
            },

            // 获取收益列表
            getProfitList() {
                let params = {
                    order_type: this.valueType,
                    sta_date: this.startDate,
                    end_date: this.endDate,
                    income_type: this.navIndex + 1,
                    page: this.page,
                    pagesize: this.pagesize,
                    order_no:this.input
                }
                this.$http.post('/api/root/settle/incomeList', params).then(res => {
                    console.log(res, '收益列表');
                    if (res.code == 1) {
                        this.profitInfo = res.data.list ? res.data.list : {}
                        this.total = res.data.list.order_count
                    }
                })
            },

            // 搜索按钮
            searchOrder(){
              this.page = 1
              this.pagesize = 15
              this.getProfitList()
            },

            // 类型选择
            selectType() {
                this.page = 1
                this.pagesize = 15
                this.getProfitList()
            },

            // 选择时间
            selectTime() {
                this.page = 1
                this.pagesize = 15
                this.startDate = this.valueTime ? this.$moment(this.valueTime[0]).format('yyyy-MM-DD') : ''
                this.endDate = this.valueTime ? this.$moment(this.valueTime[1]).format('yyyy-MM-DD') : ''
                this.getProfitList()
            },
            // 多选
            handlerCheckbox(i) {
                console.log(i);
                let arr = this.checkBoxAll;
                if (arr.includes(i)) {
                    let index = arr.indexOf(i);
                    if (index != -1) {
                        arr.splice(index, 1);
                        this.shelvesAlls.splice(index, 1);
                        if (this.checkBoxAll.length !== this.tableList.length) {
                            this.checkAll = false;
                        }
                    }
                } else {
                    this.checkBoxAll.push(i);
                    this.shelvesAlls.push(this.tableList[i].id);
                    if (this.checkBoxAll.length == this.tableList.length) {
                        this.checkAll = true;
                    }
                };
                console.log(this.shelvesAlls);
            },
            // 全选与全不选
            handerCheckAll() {
                this.checkAll = !this.checkAll;
                let arr = this.tableList.length;
                this.checkBoxAll = [];
                this.shelvesAlls = [];
                if (this.checkAll) {
                    for (let i = 0; i < arr; i++) {
                        this.checkBoxAll.push(i);
                    }
                    this.checkBoxAll.map(v => {
                        this.shelvesAlls.push(this.tableList[v].id.toString());;
                    })
                } else {
                    this.checkBoxAll = [];
                    this.shelvesAlls = []
                }
                console.log(this.shelvesAlls);
            },

            // // 全选后的删除
            // selectDel(){
            // 	console.log(this.shelvesAlls);
            // 	let res =[...new Set(this.shelvesAlls)]; //去重
            // 	console.log(res);
            // 	let str = res.join(',');
            // 	if(this.shelvesAlls.length){
            // 		this.$confirm('此操作将删除选中项, 是否继续?', '提示', {
            // 			confirmButtonText: '确定',
            // 			cancelButtonText: '取消',
            // 			type: 'warning'
            // 		}).then(()=>{
            // 			this.$http.post('/api/root/designer/del',{id:str}).then(res=>{
            // 				console.log(res);
            // 				if(res.code==1){
            // 					this.getDesigList();
            // 					this.checkAll=false;
            // 					this.checkBoxAll=[];
            // 					this.shelvesAlls=[];
            // 					this.$message({
            // 						type:'success',
            // 						message:'删除成功'
            // 					})
            // 				}
            // 			})
            // 		})
            // 	}else{
            // 		this.$message({
            // 			type:'info',
            // 			message:'请选择要删除的项'
            // 		})
            // 	}
            // },


            handleSizeChange(val) {
                this.pagesize = val;
                this.getProfitList()
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getProfitList()
            },
        },
    }
</script>

<style lang="less">
    @import 'index.less';
    @import '../iconfont.less';
</style>